<template>
    <main-wrap :bodyStyle="{height:'100%',overflow: 'hidden'}" bodyBg="/images/body2.png">
        <div class="einbox">
            <a class="inItem" @click="goPage"><img src="/images/rk2.png" alt=""/> </a>
            <a class="inItem" @click="dotips"><img src="/images/rk1.png" alt=""/> </a>
             <a class="inItem" @click="dotips"><img src="/images/rk3.png" alt=""/> </a>
            <!-- <p>{{userInfo.walletAddress}}</p> -->
        </div>
        <my-dailog v-model:show="showFlag" :styleType="20" :showtopclose="false">
            <cut-border-box>
                <div class="ggstjbox">
                    <div class="gth">
                        <i class="iconfont icon-zhuyi-yin"></i>
                    </div>
                    <div class="ettips">To become an advertiser, you need to hold</div>
                    <div class="amount">
                        <em>{{depositData || '--'}}</em> cxt
                    </div>
                    <div class="lknow">
                        <my-button :styleType="2" @click="showFlag=false">I got it</my-button>
                    </div>
                    <div class="lklink">
                        <a @click="goExchange">How to hold CXT </a><span>》</span>
                    </div>
                </div>
            </cut-border-box>
        </my-dailog>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute,useRouter } from 'vue-router'
import mainWrap from '@/components/mainWrap.vue'
import back from "@/components/back.vue";
import sort from '@/components/sort.vue';
import mySearch from '@/components/mySearch.vue'
import Image from '@/components/image.vue';
import cutBorderBox from '@/components/cutBorderBox.vue' 
import myDailog from '@/components/myDailog.vue'
import myButton from '@/components/myButton.vue';
import { toast,H5CallAPPFuction,myJsDailog,loading} from '@/utils/common';
export default {
    components:{
        mainWrap,
        back,
        sort,
        mySearch,
        Image,
        cutBorderBox,
        myDailog,
        myButton
    },
    setup(){
        const store = useStore()
        const router = useRouter()
        const route = useRoute()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            ethChain:{}, // eth链钱包余额信息
            fds:{},
            showFlag:false,
            depositData:'',
            assets:{},
        })

        onMounted(()=>{
            // App调用，回传ethChain的余额
            window['walletBalance'] = function (objStr) {
                state.ethChain = JSON.parse(objStr)
            }

            try {
                H5CallAPPFuction('jsLoadComplete')  // 调用app的jsLoadComplete方法,通知app，H5页面加载了
                H5CallAPPFuction('getWalletBalance')  // 调用app的getWalletBalance方法,通知app条用H5的walletBalance方法，获取钱包余额，
            } catch (error) {
                console.log("调用app的jsLoadComplete出错了：不是在app环境中调用")
            }

            loading.open()
            setTimeout(()=>{
                getDeposit() // 获取保证金
                getMYAsset() // 我的资产
            },3000)
            
        })

        const getDeposit = ()=>{
            store.dispatch('base/get_configure',{
                code:'ad_earnest_money'
            }).then(res =>{
                state.depositData = res.message
            })
        }

        const getMYAsset=()=>{ // 我的资产
            store.dispatch('capital/get_ctg_income',{
                walletAddress:state.userInfo.walletAddress
            }).then(res=>{
                state.assets = res.data
            })
        }
        

        // 获取广告商资产
        // const getAdvertiserAssets = ()=>{
        //     store.dispatch('capital/get_ad_capital_manage',{
        //         walletAddress:state.userInfo.walletAddress
        //     }).then(res =>{
        //         state.fds = res.data
        //     })
        // }

        const goPage=()=>{
            router.push('/ad/advertiser')
            //该用户的CXT的金额是否满足广告商的保证金
            if(parseFloat(state.assets.cxtAvailableAmount.num)>=parseFloat(state.depositData)){
                router.push('/ad/advertiser')
            }else{
                state.showFlag = true
            }
            
        }    
         
        const dotips = ()=>{
           // H5CallAPPFuction('showBrandsShop') 
            myJsDailog({
                message:'This function area is not open yet, please look forward to it',
                showCancelButton:false
            })
        }

        const goExchange = ()=>{
            try {
                H5CallAPPFuction('gotoExchange') 
            } catch (error) {
                toast('无法打开app界面')
            }
        }

        return {
            ...toRefs(state),
            goPage,
            dotips,
            goExchange
        }
    }
}
</script>

<style lang="scss" scoped>
   
    .einbox{
        display: flex;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        .inItem{
            display: block;
            width: 400px;
            &+.inItem{
                margin-left: 50px;
            }
            img{
                display: block;
                width: 100%;
            }
        }
    }
    .ggstjbox{
        width: 700px;
        .gth{
            display: flex;
            justify-content: center;
            i{
                font-size: 70px;
                color: #186EEB;
            }
        }
        .ettips{
            font-size: 28px;
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
            color: #fff;
            line-height: normal;
            text-align: center;
            padding:10px 30px;
        }
        .amount{
            font-size: 24px;
            text-align: center;
            em{
                font-style: normal;
                font-family: Poppins-SemiBold, Poppins;
                font-weight: 600;
                color: #67F8FF;
                font-size: 36px;
            }
        }
        .lknow{
            width: 200px;
            margin: 30px auto 0 auto;
        }
        .lklink{
            text-align: center;
            padding: 20px 0 0 0;
            a{
                font-size: 24px;
                color: #55C8E7;
            }
            span{
                color: #55C8E7;
                font-size: 18px;
            }
        }
    }
 
</style>